<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格</title>
    <style>
       body{
        width: 300px;
        height: 300px;
        text-align: center;
        margin: 130 auto;
        line-height: 100px;
       }
       div{
        width: 100px;
        height: 100px;
        float: left;
        text-align: center;
        font-size: 20;
       }
       .box1{
        background-color:red;
       }
       .box2{
        background-color: blue;
    }
    .box3{
        background-color: brown;
    }
    .box4{
        background-color: cadetblue;
    }
    .box5{
        background-color: chartreuse;
    }
    .box6{
        background-color: chocolate;
    }
    .box7{
        background-color: crimson;
    }
    .box8{
        background-color: darkgreen;
    }
    .box9{
        background-color: tomato;
    }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
    <div class="box6">6</div>
    <div class="box7">7</div>
    <div class="box8">8</div>
    <div class="box9">9</div>
</body>
</html>